Leer más con efecto expandir y recoger

Lo apliqué hace poco en el blog, "leer más" con la particularidad de recoger el texto.
Si buscas la forma de aplicarlo no lo pienses más y vamos a empezar.

Nos situamos en Plantilla/Edición HTML y marcamos la casilla para expandir plantillas de artilugios.

Después buscaremos en nuestra plantilla </head> y justo antes añadimos...

<script src='url_archivo_functiontoggleIt.js' type='text/javascript'/>

Descargar functiontoggleIt.js

Este archivo que descargamos a nuestro PC lo alojamos en un servidor para obtener la url y añadirla más tarde en el código que añadimos justo antes de </head> sustituyendo donde dice url_archivo_functiontoggleIt.js por la url de nuestro archivo.

Después vamos a buscar lo siguiente:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Y lo vamos a sustituir por:

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SIGUE LEYENDO</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CIERRE TEXTO</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Donde dice SIGUE LEYENDO y CIERRE TEXTO puede sustituirse por otra frase o si lo desea una imagen añadiendo el código de imagen:
<img src="url-de-la-imagen">


Por último debemos añadir un código en las entradas donde aparecerá "Leer más"

Para facilitar la tarea y evitar tener que copiar y pegar ese código cada vez que deseemos añadirlo hay una solución y es aplicarlo en la plantilla de entrada.

¿Dónde está eso?
Nos situaremos en Plantilla/Opciones/Formato casi al final encontraremos la plantilla de entrada, es una ventana con opción para escribir donde añadimos:

aquí texto
<span id="fullpost">
aquí el texto escondido
</span>

Guardamos los cambios y listo.

Ahora cada vez que editamos una entrada aparecerá ese código, escribiremos en la primera línea donde dice "aquí el texto" el inicio de la entrada y en la segunda línea de "aquí texto escondido" es el texto que aparecerá al expandirse la entrada.